<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>

<script>
    window.onpopstate = (event) => {
        console.log({ state: event.state, pathname: window.location.pathname, type: 'popstate' });
    };
    window.onpushstate = (event) => {
        console.log(event);
    };
    (function (history) {
        var pushState = history.pushState;
        history.pushState = function (state, title, pathname) {
            if (typeof window.onpushstate == "function") {
                window.onpushstate({ state, pathname, type: 'pushstate' });
            }
            return pushState.apply(history, arguments);
        };
    })(window.history);

    //绑定事件处理函数.
    setTimeout(() => {
        history.pushState({ page: 1 }, "title 1", "/page1");
    }, 1000);
    setTimeout(() => {
        history.pushState({ page: 2 }, "title 2", "/page2");
    }, 2000);

    setTimeout(() => {
        history.replaceState({ page: 3 }, "title 3", "/page3");
    }, 3000);

    setTimeout(() => {
        history.back();
    }, 4000);

    setTimeout(() => {
        history.go(1);
    }, 5000);

</script>
</body>
</html>